<template>
  <el-form class="list-b-12 p-12 m-8 bg-color-white" :model="dataInfo.form" label-width="auto" ref="ruleFormRef"
    @submit.prevent="">
    <ElFormItemBox label="复制内容">
      {{ data.copy || '--' }}
    </ElFormItemBox>

    <el-divider border-style="dashed" />
    <ElFormItemBox label="税率">
      <CopyBox data="proxy.$setTaxRate(row)" @copyBtn="copyBtn">
        <ElSelectBox :data="data.tax" dataName="taxRate" :options="[
          {
            label: '13%',
            value: 0.13,
          },
          {
            label: '6%',
            value: 0.06,
          },
        ]" @changeBtn="setTaxRate(data.tax, {
          taxRate: 'taxRate', // 税率
          taxExcludedUnitPrice: 'taxExcludedUnitPrice', // 未税单价
          taxIncludedUnitPrice: 'taxIncludedUnitPrice', // 含税单价
          taxExcludedTotalPrice: 'taxExcludedTotalPrice', // 未税总价
          taxIncludedTotalPrice: 'taxIncludedTotalPrice', // 含税总价
          quantity: 'quantity', // 数量
        })" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="数量">
      <CopyBox data="proxy.$setTaxQuantity(row)" @copyBtn="copyBtn">
        <ElNumberBox :data="data.tax" dataName="quantity" @changeBtn="setTaxQuantity(data.tax, {
          taxRate: 'taxRate', // 税率
          taxExcludedUnitPrice: 'taxExcludedUnitPrice', // 未税单价
          taxIncludedUnitPrice: 'taxIncludedUnitPrice', // 含税单价
          taxExcludedTotalPrice: 'taxExcludedTotalPrice', // 未税总价
          taxIncludedTotalPrice: 'taxIncludedTotalPrice', // 含税总价
          quantity: 'quantity', // 数量
        })" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="未税单价">
      <CopyBox data="proxy.$setTaxExcludedUnitPrice(row)" @copyBtn="copyBtn">
        <ElNumberBox :data="data.tax" dataName="taxExcludedUnitPrice" @changeBtn="setTaxExcludedUnitPrice(data.tax, {
          taxRate: 'taxRate', // 税率
          taxExcludedUnitPrice: 'taxExcludedUnitPrice', // 未税单价
          taxIncludedUnitPrice: 'taxIncludedUnitPrice', // 含税单价
          taxExcludedTotalPrice: 'taxExcludedTotalPrice', // 未税总价
          taxIncludedTotalPrice: 'taxIncludedTotalPrice', // 含税总价
          quantity: 'quantity', // 数量
        })" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="含税单价">
      <CopyBox data="proxy.$setTaxInclusiveUnitPrice(data)" @copyBtn="copyBtn">
        <ElNumberBox :data="data.tax" dataName="taxIncludedUnitPrice" @changeBtn="setTaxInclusiveUnitPrice(data.tax, {
          taxRate: 'taxRate', // 税率
          taxExcludedUnitPrice: 'taxExcludedUnitPrice', // 未税单价
          taxIncludedUnitPrice: 'taxIncludedUnitPrice', // 含税单价
          taxExcludedTotalPrice: 'taxExcludedTotalPrice', // 未税总价
          taxIncludedTotalPrice: 'taxIncludedTotalPrice', // 含税总价
          quantity: 'quantity', // 数量
        })" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="未税总价">
      <CopyBox data="proxy.$setTaxExclusiveTotalPrice(data)" @copyBtn="copyBtn">
        <ElNumberBox :data="data.tax" dataName="taxExcludedTotalPrice" @changeBtn="setTaxExclusiveTotalPrice(data.tax, {
          taxRate: 'taxRate', // 税率
          taxExcludedUnitPrice: 'taxExcludedUnitPrice', // 未税单价
          taxIncludedUnitPrice: 'taxIncludedUnitPrice', // 含税单价
          taxExcludedTotalPrice: 'taxExcludedTotalPrice', // 未税总价
          taxIncludedTotalPrice: 'taxIncludedTotalPrice', // 含税总价
          quantity: 'quantity', // 数量
        })" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="含税总价">
      <CopyBox data="proxy.$setTaxInclusiveTotalPrice(data)" @copyBtn="copyBtn">
        <ElNumberBox :data="data.tax" dataName="taxIncludedTotalPrice" @changeBtn="setTaxInclusiveTotalPrice(data.tax, {
          taxRate: 'taxRate', // 税率
          taxExcludedUnitPrice: 'taxExcludedUnitPrice', // 未税单价
          taxIncludedUnitPrice: 'taxIncludedUnitPrice', // 含税单价
          taxExcludedTotalPrice: 'taxExcludedTotalPrice', // 未税总价
          taxIncludedTotalPrice: 'taxIncludedTotalPrice', // 含税总价
          quantity: 'quantity', // 数量
        })" :width="200" />
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="税额">
      <CopyBox data="proxy.$calculateTax(data)" @copyBtn="copyBtn">
        {{ calculateTaxFromInclusiveTotalPrice(data.tax, {
          taxRate: 'taxRate', // 税率
          taxIncludedTotalPrice: 'taxIncludedTotalPrice', // 含税总价
        }) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="金额大写">
      <CopyBox data="chineseNumber(number)" @copyBtn="copyBtn">
        {{ chineseNumber(data.tax.taxIncludedTotalPrice) }}
      </CopyBox>
    </ElFormItemBox>
    <ElFormItemBox label="金额大写">
      <CopyBox data="formatThousandSeparator(number)" @copyBtn="copyBtn">
        {{ formatThousandSeparator(data.tax.taxIncludedTotalPrice) }}
      </CopyBox>
    </ElFormItemBox>

  </el-form>
</template>
<script setup lang="ts">
import {
  setTaxRate, //修改-税率
  setTaxQuantity, //修改-数量
  setTaxExcludedUnitPrice,//修改-未税单价
  setTaxInclusiveUnitPrice,//修改-含税单价
  setTaxExclusiveTotalPrice,//修改-未税总价
  setTaxInclusiveTotalPrice,//修改-含税总价
  calculateTaxFromInclusiveTotalPrice,//计算税额
  chineseNumber,//将数字金额转换为中文大写（人民币格式）
  formatThousandSeparator,//格式化数字为千分位形式，默认保留两位小数（四舍五入）
} from '@/utils/tax.ts';
import { useListComponent } from './pageTs'; // 引入逻辑
const { dataInfo } = useListComponent();
import { reactive, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
const data = reactive({
  copy: '',
  tax: {
    taxRate: 0.13,//税率
    quantity: 100,//数量
    taxIncludedUnitPrice: 113,//含税单价
    taxIncludedTotalPrice: 11300,//含税总价
    taxExcludedUnitPrice: 100,//未税单价
    taxExcludedTotalPrice: 10000,//未税总价
    precision: 2,//精度
  },
});
const ruleFormRef = ref<HTMLElement | null>(null);
const copyBtn = (text: string) => {
  data.copy = text
};


onMounted(() => { });

onBeforeUnmount(() => { });
</script>